﻿<template>
  <div>
    <h2>Class 与 Style 绑定演示</h2>

    <!-- 绑定对象 -->
    <div class="static" :class="{ active: isActive, 'text-danger': hasError }">
      绑定对象示例
    </div>

    <!-- 绑定数组 -->
    <div :class="[activeClass, errorClass]">
      绑定数组示例
    </div>

    <!-- 在组件上使用 -->
<!--    <MyComponent class="baz" />-->

    <!-- 绑定内联样式 -->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
      绑定内联样式对象示例
    </div>

    <!-- 绑定内联样式数组 -->
    <div :style="[baseStyles, overridingStyles]">
      绑定内联样式数组示例
    </div>

    <button @click="toggleActive">切换 Active 状态</button>
    <button @click="toggleError">切换 Error 状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      activeClass: 'active',
      errorClass: 'text-danger',
      activeColor: 'red',
      fontSize: 30,
      baseStyles: {
        color: 'blue',
        fontSize: '12px'
      },
      overridingStyles: {
        fontSize: '14px'
      }
    }
  },
  // components: {
  //   'my-component': {
  //     template: `
  //       <template>
  //         <p class="foo bar">这是子组件</p>
  //       </template>
  //     `
  //   }
  // },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
    toggleError() {
      this.hasError = !this.hasError;
    }
  }
}
</script>

<style scoped>
.active {
  font-weight: bold;
  color: red;
}

.text-danger {
  color: green;
}

.foo {
  color: green;
}

.bar {
  background-color: yellow;
}

.baz {
  border: 1px solid black;
}
</style>
